<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>薪资信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" id="form-search">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">员工名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="employee_name" placeholder="请输入" autocomplete="off" class="layui-input"
                                       id="employee_name">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">生成月份</label>
                            <div class="layui-input-inline">
                                <input type="text" name="creattime" autocomplete="off" class="layui-input date">
                            </div>
                        </div>


                        <button id="btn-search" lay-submit lay-filter="btn-search-filter" type="button"
                                class="layui-btn layui-btn-radius layui-btn-normal">
                            <i class="layui-icon layui-icon-search"></i>
                            查询
                        </button>
                        <button id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-primary">
                            <i class="layui-icon layui-icon-fonts-clear"></i>
                            重置
                        </button>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">薪资添加</button>
                <!--                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>-->
            </div>
        </script>

        <table class="layui-hide" id="salary-table" lay-filter="salary-table-Filter"></table>

        <script type="text/html" id="table-edit">

            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>
<script th:src="@{lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{js/lay-config.js?v=2.0.0}" charset="utf-8"></script>


<script type="text/html" id="convertDept">
    {{#
    return d.department.name;
    }}
</script>


<script>
    function refreshTable() {
        $("#form-reset").click();
        $("#btn-search").click();
    }

    layui.use(['form', 'table', 'laydate', 'tableSelect'], function () {
        var $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            table = layui.table;
            tableSelect = layui.tableSelect;
        laydate.render({
            elem: '.date' //指定元素
        });

        //多条件搜索
        tableSelect.render({
            elem: '#employee_name',
            checkedKey: 'id',
            searchType: 'more',
            searchList: [
                {searchKey: 'name', searchPlaceholder: '搜索员工姓名'}, //搜索条件1
            ],
            table: {
                url: '/emp/list',
                cols: [
                    [
                    { type: 'radio' },
                    { field: 'id', title: 'ID' },
                    { field: 'name', title: '姓名' },
                    { field: 'department', title: '部门',templet: '#convertDept' }
                ]
                ]
            },
            done: function (elem, data) {
                var NEWJSON = []
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.username)
                })
                elem.val(NEWJSON.join(","))
            }
        })


        table.render({
            elem: '#salary-table',
            url: '/salary/list',
            toolbar: '#toolbarDemo',
            cols: [
                [
                    {field: 'employee_name', width: 180, title: '员工姓名', align: "center"},
                    {field: 'dept_name', width: 180, title: '员工部门', align: "center"},
                    {field: 'creattime', width: 200, title: '发放时间', align: "center"},
                    {field: 'base_salary', width: 180, title: '标准工资', align: "center"},
                    {field: 'ad_salary', width: 180, title: '奖惩', align: "center"},
                    {field: 'end_salary', width: 180, title: '总计', align: "center"},
                    {title: '操作', minWidth: 50, toolbar: '#table-edit', align: "center"}
                ]
            ],
            limits: [1, 5, 10, 30, 50, 100],
            limit: 10,
            page: true,
        });


        //监听表单提交
        form.on('submit(btn-search-filter)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            table.reload('salary-table', {
                where: { //设定异步数据接口的额外参数，任意设
                    employee_name: data.field.employee_name,
                    creattime: data.field.creattime
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //     /**
        //      * toolbar监听事件
        //      */
        //添加和删除功能
        table.on('toolbar(salary-table-Filter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '薪资添加',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['80%', '90%'],
                    content: '/salary/salaryAdd',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
        });


        table.on('tool(salary-table-Filter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '薪资修改',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['75%', '90%'],
                    content: '/salary/' + data.id,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }

            //单个员工的删除功能
            else if (obj.event === 'delete') {
                //提示框
                layer.confirm('请确认删除该员工薪资记录吗:' + data.employee_name + " ?", {icon: 3, title: '确认'}, function (index) {
                    //异步删除,成功提示,刷新表格
                    url = "[[@{/}]]" + "salary/delete/" + data.id;
                    var params = {
                        _method: "DELETE"
                    }
                    $.post(url, params, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.message, {icon: 1, title: "操作结果"});
                            refreshTable();
                        }
                    })

                });
            }
        });
    });
</script>

</body>
</html>